<template>
	<view class="app-conatianer">
		<view class="tab-height">
			<tab-index></tab-index>
		</view>
		<tn-tabbar v-model="currentTabbar" height="120rpx" bg-color="#ffffff" :fixed="false">
			<tn-tabbar-item v-for="(item, index) in   tabbarData  " :key="index" :icon="item.icon"
				:active-icon="item.activeIcon" color="#8287A9" active-color="#476dea" icon-size="48" font-size="24"
				:client-icon="true" :text="item.name">
				<template #clientIcon="{ data }">
					<image class="icon-img" :src=" data.isActive ? item.activeIcon : item.icon "></image>
				</template>
			</tn-tabbar-item>
		</tn-tabbar>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import TabIndex from '@/components/tab/index.vue'

	const currentTabbar = ref(0)

	// 导航栏数据
	const tabbarData = [{
		name: '首页',
		icon: '/static/icon/index/home.png',
		activeIcon: '/static/icon/index/home_active.png',
	},
	{
		name: '嗨团',
		icon: '/static/icon/index/group.png',
		activeIcon: '/static/icon/index/group_active.png',
	},
	{
		name: '发现',
		icon: '/static/icon/index/find.png',
		activeIcon: '/static/icon/index/find_active.png',
	},
	{
		name: '我的',
		icon: '/static/icon/index/mine.png',
		activeIcon: '/static/icon/index/mine_active.png',
	},
	]
</script>

<style scoped lang="scss">
	.app-conatianer {
		height: 100vh;
		overflow: hidden;
	}
	
	.tab-height {
		height: calc(100vh - 120rpx);
	}
		
	.icon-img {
		width: 48rpx;
		height: 48rpx;
	}
</style>